<template>
  <div class="v2t-history">
    <div class="v2t-history-header">
      <h2>历史记录</h2>
      <button 
        @click="clearHistory" 
        class="v2t-button v2t-button-danger"
        v-if="items.length"
      >
        清除记录
      </button>
    </div>

    <div v-if="items.length" class="v2t-history-list">
      <div 
        v-for="item in items" 
        :key="item.id"
        class="v2t-history-item"
      >
        <div class="v2t-history-item-header">
          <h3>{{ item.title }}</h3>
          <span class="v2t-history-item-time">
            {{ formatTime(item.timestamp) }}
          </span>
        </div>
        <p class="v2t-history-item-text">{{ item.text }}</p>
        <a 
          :href="item.url" 
          target="_blank"
          class="v2t-history-item-link"
        >
          查看原视频
        </a>
      </div>
    </div>

    <div v-else class="v2t-history-empty">
      暂无历史记录
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { HistoryService } from '../services/history.service';

export default defineComponent({
  name: 'V2tHistoryList',

  setup() {
    const items = ref([]);

    const loadHistory = async () => {
      items.value = await HistoryService.getHistory();
    };

    const clearHistory = async () => {
      if (confirm('确定要清除所有历史记录吗？')) {
        await HistoryService.clearHistory();
        items.value = [];
      }
    };

    const formatTime = (timestamp: string) => {
      return new Date(timestamp).toLocaleString('zh-CN');
    };

    onMounted(loadHistory);

    return {
      items,
      clearHistory,
      formatTime
    };
  }
});
</script>

<style scoped>
.v2t-history {
  margin-top: 16px;
}

.v2t-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.v2t-button-danger {
  background: #dc3545;
}

.v2t-history-item {
  padding: 12px;
  margin-bottom: 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.v2t-history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.v2t-history-item-time {
  font-size: 12px;
  color: #6c757d;
}

.v2t-history-item-text {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.v2t-history-item-link {
  font-size: 12px;
  color: #007bff;
  text-decoration: none;
}

.v2t-history-empty {
  text-align: center;
  color: #6c757d;
  padding: 24px;
}
</style> 